<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>


<div id="app"></div>

<script type="text/babel">


    class Login extends React.Component {


        handleSubmit = (event) => {
            event.preventDefault()
            const { username, password } = this
            alert(username.value)
        }

        render() {
            return (
                <form action="http://www.baidu.com" onSubmit={this.handleSubmit}>
                    <table>
                        <tr>
                            用户名：<input type="text" name="username" ref={c => this.username = c} />
                        </tr>
                        <tr>
                            密码：<input type="text" name="password" ref={c => this.password = c} />
                        </tr>
                        <tr>

                            <button>登录</button></tr>
                    </table>


                </form>
            )
        }
    }


    ReactDOM.render(<Login />, document.getElementById('app'))
//页面中输入dom
</script>
</body>

</html>